<template>
	<view class="container">
		<view class="carousel">
			<image :src="$public.imgageUrl(shangJiaData.corporatePicture) " mode="scaleToFill" class="banner"></image>
		</view>
		<view class="mian-top-bg">

		</view>
		<view class="wrap">
			<view class="company">
				{{shangJiaData.tenementName}}
			</view>
			<view class="yysj">
				<image src="../../static/sj_time.png" mode="scaleToFill" class="image"></image>
				营业时间： <text class="time redwz">{{shangJiaData.busTime}}</text>
			</view>
			<view class="address">
				地址：{{shangJiaData.tenementAdd}}
			</view>
		</view>

		<view class="juli-div">
			<view class="wrap juli-flex">
				<view class="juli-left">
					<uni-icons type="location-filled" size="18" color="#666666"></uni-icons>
					距离我 <text class="juliwz redwz">{{shangJiaData.juli*1000}}m</text>
				</view>
				<view class="juli-right">
					<image src="../../static/sj_dw.png" mode="scaleToFill" class="image"
						@click="$public.navto('/pages/index/map',{lat:shangJiaData.lat,lng:shangJiaData.lng})"></image>
					<image src="../../static/sj_dh.png" mode="scaleToFill" class="image"
						@click="$public.telPhone(shangJiaData.phone)"></image>
				</view>
			</view>
		</view>
		<view class="wrap">
			<jxwTitle title="推荐"></jxwTitle>
			<view class="list-div">
				<view class="list" v-for="item in shangJiaData.params.product" :key="item.productId"
					@click="$public.navto('detail',{productId:item.productId,company:shangJiaData.tenementName,point:shangJiaData.lat+','+shangJiaData.lng})">
					<image :src="$public.imgageUrl(item.smallImage)" mode="scaleToFill" class="image"></image>
					<view class="list-right">
						<view class="h1">
							{{item.title}}
						</view>
						<view class="h2 redwz">
							￥{{item.json.money}}
						</view>
						<view class="h3">
							市场价：￥{{item.json.menJia}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	/* import {
		mapState
	} from 'vuex'
	import share from '@/store/index.js' */
	export default {
		data() {
			return {
				applyId: 0,
				shangJiaData: {
					corporatePicture: "",
					tenementName: "",
					busTime: "",
					tenementAdd: "",
					juli: "",
					phone: "",
					params: {
						product: []
					}
				}
			}
		},
		onLoad(options) {
			this.$public.showLoading()
			if (options.applyId)
				this.applyId = options.applyId

		},
		onShow() {
			if (!this.$public.isLoginUrl())
				return false;
			this.getShangJiaProductList()
		},
		methods: {
			getShangJiaProductList() {
				let that = this
				this.$public.getLocation()
				let location = uni.getStorageSync('setLocation');
				if (location) {
					this.myLocation = location
				}
				this.$public.htmlPost("/api/getShangJiaProductList", {
					applyId: that.applyId
				}).then((res) => {
					console.log("getShangJiaProductList res", res)
					let data = res.data;
					if (data.code == 0) {
						let arr = data.data.bak1.split(",");
						data.data.lat = arr[0];
						data.data.lng = arr[1];
						data.data.juli = that.$public.distance(data.data.lat, data.data.lng, that.myLocation.lat, that.myLocation
							.lng)
						data.data.params.product.forEach(item => {
							item.json = JSON.parse(item.referenceMoney);
						})
						that.shangJiaData = data.data
						uni.hideLoading();
					}
				})

			},
			openMap() {
				// console.log("openMap")
				let that = this
				uni.chooseLocation({
					latitude: this.shangJiaData.lat,
					longitude: this.shangJiaData.lng,
					success: function(res) {
						// that.data.bak1 = res.latitude + "," + res.longitude
					},
					fail: function(res) {
						console.log("res", res);
					}
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.banner {
		width: 100%;
		height: 564rpx;
	}

	.mian-top-bg {
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, #FFFFFF 100%);

		border-radius: 40rpx 40rpx 0rpx 0rpx;
		height: 56rpx;
		width: 100%;
		margin-top: -56rpx;
		position: relative;
		z-index: 10;
	}

	.wrap {
		padding: $uni-wrap-padding;

		.company {
			font-weight: bold;
			color: #333333;
			font-size: 32rpx;
			margin-bottom: 16rpx;
		}

		.yysj {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #999999;
			margin-bottom: 16rpx;

			.image {
				width: 32rpx;
				height: 32rpx;

			}
		}

		.address {
			font-size: 26rpx;
			color: #666666;
			line-height: 30rpx;

		}

		.juli-left {
			display: flex;
			align-items: center;
			color: #666666;
			font-size: 26rpx;
			height: 80rpx;
		}

		.juli-right {
			display: flex;
			align-items: center;
			height: 80rpx;

			.image {
				width: 48rpx;
				height: 48rpx;
				margin-left: 40rpx;
			}
		}

		.list-div {
			.list {
				display: flex;
				justify-content: space-between;
				margin-bottom: 30rpx;

				.image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 16rpx 16rpx 0rpx 0rpx;

				}

				.list-right {
					width: 506rpx;
					border-bottom: 1px solid rgba(0, 0, 0, 0.1);

					.h1 {

						color: #333333;
						font-size: 30rpx;
						line-height: 35rpx;
					}

					.h2 {

						font-size: 32rpx;
						margin: 15rpx 0;
					}

					.h3 {
						text-decoration: line-through;
						font-size: 26rpx;
						color: #999999;
					}
				}
			}
		}
	}

	.juli-div {
		background: linear-gradient(90deg, #ffdbdb 0%, #FFFFFF 100%);
		height: 80rpx;
		margin: 24rpx 0;

		.juli-flex {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.redwz {
		color: #DF686A;
	}
</style>